<template>
  <div class="content_aside">
    <div
      v-for="(item, index) in recommendList"
      :key="index"
      class="recomenditem"
    >
      <nuxt-link :to="{ path: '/post/postDetail?id=' + item.id }">
        <el-row>
          <el-col :span="16"
            ><div class="clo_l">
              <h3>{{ item.title }}</h3>
              <!-- <p>内容</p> -->
              <div>
                <span>{{
                  moment(item.created_at).format("YYYY-MM-DD-HH-mm")
                }}</span
                ><span>{{ item.watch }}</span>
              </div>
            </div></el-col
          >
          <el-col :span="8"
            ><div class="clo_r">
              <img
                :src="item.images[0].url"
                alt=""
                v-if="item.images.length"
              /></div
          ></el-col>
        </el-row>
      </nuxt-link>
    </div>
  </div>
</template>

<script>
import moment from "moment";
export default {
  data() {
    return {
      recommendList: [],
      moment,
    };
  },
  mounted() {
    this.$axios({
      url: "/posts/recommend",
    }).then((res) => {
      this.recommendList = res.data.data;
      console.log(this.recommendList);
    });
  },
};
</script>

<style lang="less" scoped>
.content_aside {
  padding-top: 12px;
  .recomenditem {
    padding: 10px 0;
    border-bottom: 1px solid #ccc;
  }
  .clo_l {
    h3 {
      font-size: 18px;
      font-weight: normal;
    }
    p {
      font-size: 14px;
    }
    span {
      font-size: 12px;
      color: rgb(138, 134, 134);
      margin: 0 5px 0 0;
    }
  }
  .clo_r {
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
}
</style>